<template>
<div style="min-height: 100vh;background-color: #f5f5f5">
  <van-nav-bar  :fixed="true" :placeholder="true" left-arrow @click-left="return1">
    <template #title>
      <div style="color: red;font-size: 20px;text-align: center;font-weight: bold">订单详情</div>
    </template>
  </van-nav-bar>
  <div style="text-align: center;margin-top: 10px;" v-if="list.status==0">需支付：￥{{list.price*list.num}}</div>
  <div style="justify-content: center;display: flex;margin-top: 10px" v-if="list.status==0"><van-button type="danger" round size="middle" style="width: 25%;margin-bottom: 10px" >去支付</van-button></div>
  <div style="justify-content: center;display: flex;margin-top: 10px" v-if="list.status==1"><van-button type="danger" round size="middle" style="width: 35%;margin-bottom: 10px" >已支付，待收货</van-button></div>
  <div style="justify-content: center;display: flex;margin-top: 10px" v-if="list.status==2"><van-button type="danger" round size="middle" style="width: 35%;margin-bottom: 10px" >已收货，待评价</van-button></div>
  <div style="justify-content: center;display: flex;margin-top: 10px" v-if="list.status==4"><van-button type="danger" round size="middle" style="width: 25%;margin-bottom: 10px" >已取消</van-button></div>
  <div style="justify-content: center;display: flex;margin-top: 10px" v-if="list.status==3"><van-button type="danger" round size="middle" style="width: 25%;margin-bottom: 10px" >订单结束</van-button></div>
  <div style="display: flex;background-color: white;align-items: center">
    <div style="border-radius: 5px;padding: 10px;background-color: white;font-weight: 600">{{list.recipientName}}  <span style="margin-left: 10px">{{list.phoneNumber}}</span></div>
<!--    <div style="margin-left: auto;display: flex;align-items: center;font-size: 13px;height: 100%" v-if="list.status==0"><span style="display: flex;align-items: center">修改</span><van-icon name="arrow" style="display: flex;align-items: center"/></div>-->

  </div>
<div style="background-color: white;padding-left: 10px;color: #8c92a4;font-size: 15px;padding-bottom: 10px">地址：{{list.province+list.city+list.streetAddress}}</div>
  <div style="margin: 10px;background-color: white;border-radius: 10px">
    <van-card
      :num="list.num"
      :price="list.price"
      :desc="'规格：'+list.specification"
      :title="list.itemDescription"
      :thumb="list.itemImages?list.itemImages.split(';')[0]:''"
    />
  </div>
  <div style="margin: 10px;background-color: white;border-radius: 10px;padding: 0px">
    <van-cell-group>
      <van-cell title="下单时间" :value="list.createTime" />
      <van-cell title="支付方式" value="在线支付" />
      <van-cell title="商品总价" :value="'￥'+list.price*list.num" />
      <van-cell title="运费" value="￥0.00" />
    </van-cell-group>
    <div style="padding: 10px;text-align: right" v-if="list.status==0">需付款：<span style="color: red;font-size: 14px">￥</span><span style="color: red;font-size: 20px">{{list.price*list.num}}</span></div>
  </div>
  <van-submit-bar v-if="list.status!=4">
    <template #default>
      <van-button round type="info" color="red" size="small" style="width: 20%;margin-right: 10px" v-if="list.status==2" @click="comment">去评价</van-button>
<!--      <van-button round type="info" color="red" size="small" style="width: 20%;margin-right: 10px" v-if="list.status==2">退货</van-button>-->
      <van-button round type="info" color="red" size="small" style="width: 20%;margin-right: 10px" v-if="list.status==1" @click="changeOrder(2)">收货</van-button>
      <van-button round type="info" color="red" size="small" style="width: 20%;margin-right: 10px" v-if="list.status==0" @click="changeOrder(4)">取消订单</van-button>
      <van-button round type="info" color="red" size="small" style="width: 20%;margin-right: 10px" @click="pay" v-if="list.status==0">去支付</van-button>

    </template>
    <template #button>

    </template>
  </van-submit-bar>
</div>
</template>

<script>
import Vue from 'vue';
import {Button, Toast} from 'vant';
import { NavBar } from 'vant';
import { Icon } from 'vant';
import { Card } from 'vant';
import request from "../../utils/request";
import { Cell, CellGroup } from 'vant';
import { SubmitBar } from 'vant';
import { Dialog } from 'vant';
Vue.use(SubmitBar);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Card);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Button);
export default {
  data(){
    return{
      list:{},
      itemId:this.$route.query.itemId
    }
  },
  created() {
this.getData()
  },
  methods:{
    //评价
    comment(){
      this.$router.push({path:'/submitComment',query:{itemId:this.$route.query.itemId}})
    },
    //收货
    changeOrder(i){
      request.post('/order/changeOrder',{orderId:this.list.orderId,status:i}).then(resp=>{
          if (resp.code===0){
            this.getData()
            Toast('操作成功')
          }
      })
    },
    pay(){
      Dialog.confirm({
        title: '支付确认',
        message: '确认支付订单？',
      })
        .then(() => {

          request.post('/order/pay',this.list).then(resp=>{
            if (resp.code===0){
              this.$router.push({path:'/order',query:{active:0}})
              Toast('支付成功')
            }else {
              Toast(resp.errorMessage)
            }
          })
        })
        .catch(() => {
          // on cancel
        });
    },
    getData(){

      request.post('/order/getDetail',{orderId: this.$route.query.itemId}).then(resp=>{
        this.list=resp.data
        this.list.orderId=this.$route.query.itemId
      })
    },
    return1(){
      this.$router.push({path:'/order',query:{active:1}})
    }
  }
}
</script>

<style scoped>
>>> .van-card{
  background-color: white;
}
>>> .van-nav-bar .van-icon{
  color: black!important;
}
</style>
